<template>
  <div class="item_list">
	<van-nav-bar class="fixedTop" :title="category" left-text="返回" left-arrow @click-left="onClickLeft" />
    <goods-list :shopId="shopId" :type="0" :categoryId="itemClass" @addCart="addCart" />

    <van-sku v-if="skuData" v-model="showSku" :sku="skuData.sku" :goods="skuData.goods" :hide-stock="skuData.sku.hide_stock"
      :quota="0" :quota-used="0" ref="skuDom">
      <template slot="sku-actions" slot-scope="props">
        <div class="van-sku-actions">
          <van-button bottom-action @click="addSkuCart">加入购物车</van-button>
        </div>
      </template>
    </van-sku>

    <transition name="fade">
      <van-icon name="arrowupcircle" class="backTop red" @click.native="backTop" v-show="showArrow"/>
    </transition>
  </div>
</template>

<script>
import {
	NavBar,
	Sku
} from 'vant';

import scrollFixed from '@/vue/mixin/scroll-fixed';
import GoodsList from "@/vue/components/goods-list/";
import buyAction from "@/vue/mixin/buy-action";
import skuData from "@/vue/mixin/sku-data";

	export default {
	  name: "Item-list",
	  props: {
	    keyword: {
	      type: String,
	      default: ""
	    },
	    itemClass: {
	      type: [String, Number],
	      default: ""
			},
			category: {
				type: String,
				default: ""
			}
	  },

	  mixins: [buyAction, skuData, scrollFixed],

	  data() {
	    return {
	      shopId: this.getUser().upshopTid,
	    }
	  },

	  methods: {
		onClickLeft() {
			this.$router.go(-1);
		}
	  },

	  components: {
	    [GoodsList.name]: GoodsList,
		[NavBar.name]: NavBar,
		[Sku.name]: Sku
	  }
	}
</script>

<style lang="scss" scoped>
	.item_list{
		background-color: $bg-color;
		padding-top: 50px;
		box-sizing: border-box;
	}
	.fixedTop{
		position: fixed;
		width: 100%;
		top: 0;
		z-index: 999;
		background-color: $green;
		color: white;
		margin-bottom: 50px;
	}
</style>
